<template>
    <div>
        <el-button type="primary" size="mini" @click="deleteSelection(null)">批量删除</el-button>
        <el-table @selection-change="handleSelectionChange" size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column type="selection"  prop="id" label="" ></el-table-column>
            <el-table-column prop="name" label="收货人名称" align="center" ></el-table-column>
            <el-table-column prop="phone" label="收货人手机号" align="center" ></el-table-column>
            <el-table-column prop="address" label="收货人地址" align="center" ></el-table-column>
            <el-table-column align="header-center" label="生日">
                <template slot-scope="scope">{{ moment(scope.row.birthday).format('YYYY-MM-DD') }}</template>
            </el-table-column>
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{statusList[scope.row.ord] }}</span>
            </template>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="primary"><router-link to="/add">新增</router-link></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import moment from 'moment'
    export default {
        name: "StudentList",
        data(){
            return {
                statusList:["未审核","审核中","已审核"],
                multipleSelection:[],
                delBtnStu:true,
                dataList:[],
                pagination: {//分页相关属性
                    currentPage: 1,//当前页码
                    pageSize:2,//每页显示的记录数
                    total:100,//总记录数
                },
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
                //通过数组长度来判断是否有选中信息
                this.delBtnStu= val.length==0
            },
            deleteSelection(id){
                this.$confirm('此操作将永久删除选中文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids=[]
                    if(id){ //如果id不为空表明是单条数据删除
                        ids.push(id)
                    }else{ //如果id不为空表明是批量删除,需要遍历multipleSelection数组获取所有id
                        this.multipleSelection.forEach( row => {
                            ids.push(row.id)
                        })
                    }
                    axios.post("http://localhost:8888/users/del?ids="+ids).then(res=> {
                        //提示信息
                        this.$message({
                            type:res.data.data.flag?'success':'error',
                            message:res.data.data.message
                        });
                        //刷新数据
                        this.findPage()
                    })
                })
            },
            findPage() {
                axios.post("http://localhost:8888/users/findAll",this.pagination).then(res => {
                    this.dataList = res.data.rows;//当前页展示的数据集合
                    this.pagination.total = res.data.total;//总数据量
                })
            },
            handleCurrentChange(currentPage) {
                //为模型数据赋值（当前页面）
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            moment(){
                return moment(...arguments)
            },
            handleUpdate(row){
               this.$router.push({path:'/add/'+row.id})
            }
        },
        mounted(){
            this.findPage()
        }
    }
</script>

<style scoped>
    .datatable td, .datatable th {
        padding: 12px 0;
        min-width: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
    }
</style>
